<template>
  <div>
    <div>
      <div class="bodys">
        <div class="commend">
          <img src="../../assets/helpServerIcon/red.png" alt="" style="width:1vw;height:2.67vw;">
          <span style="font-size:15px;margin-left:2vw;">文章推荐</span>
        </div>
          <img :src="v.commendImg" alt="">
          <p class="title">{{v.title}}</p>
          <div class="publisher">
            <img :src="v.headIcon" alt="">
            <span>{{v.id}}</span>
            <div class="right">
              <img src="../../assets/helpServerIcon/soucang.png" alt="">
              <p>{{v.collectionNumber}}</p>
            </div>

          </div>

        </div>

      </div>

    </div>
</template>

<script>
    export default {
        name: "recommend",
      props:["recommend"]
    }
</script>

<style scoped lang="scss">
.bodys{
  width:100vw;


    .commend{
      width:92vw;
      margin:0px auto;
      height:13vw;
      padding-top:4.13vw;
    }
}
.commodity{
  width:44.27vw;
  float:left;
  margin-left:4vw;
  border-radius:6px;
  overflow:hidden;
  box-shadow:1px 0 1px 1px #ccc;
  margin-bottom:10vw;
    img{
      width:100%;
      height:42.67vw;
    }
    .title{
      font-size:15px;
      color:#333333;
      width:92%;
      height:12vw;
      display: -webkit-box;
      overflow:hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow:ellipsis;
      margin:0px auto;
    }
  .publisher{
    width:92%;
    height:6.67vw;
    margin:0px auto;
      img{
        width:6.67vw;
        height:6.67vw;
        float:left;
       /* margin-left:2.67vw;*/
      }
      span{
        float:left;
        line-height:6.67vw;
      }
    .right{
      float:right;
      img{
        width:2.93vw;
        height:3.19vw;
        float:left;
        margin-top:1.75vw;
      }
      p{
        float:left;
        line-height:6.67vw;
      }
    }
  }
}
.commodity:last-child{
  margin-bottom:20vw;
}
</style>
